<template>
    <div>
        <h3>ref定义页面响应式数据</h3>
        <p>用户姓名：{{ name }}</p>
        <p>学科姓名：{{ subject.name }}</p>
        <button @click="changeInfo">修改响应式数据</button>
    </div>
</template>

<script>
// 引入定义响应式数据的api（ref）
import { ref } from "vue"
export default {
    setup(props, ctx) {

        // 1.使用ref定义响应式数据
        // 1.1基本类型
        let name = ref('李四')  //vue2: Object.definproperty()
        // 1.2引用类型
        let subject = ref({ id: 1, name: "web" }) //===>reactive===>proxy

        console.log(name)
        console.log(name.value)
        console.log(subject)
        console.log(subject.value)

        // 修改数据  在页面使用的话不需要.value(模板会进行浅解析) 在js 需要.value  
        function changeInfo() {
            name.value = "张三"
            subject.value.name = "java"
        }


        // 返回数据
        return {
            name,
            subject,
            changeInfo
        }
    }
};
</script>

<style scoped></style>
